import {View,Text,TouchableOpacity,StyleSheet,ScrollView,Image,Button,FlatList,Alert} from 'react-native';
import { useCallback, useEffect, useState } from 'react';
import '../../global';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import AsyncStorage from '@react-native-async-storage/async-storage'
import {useCommendList} from '../../context'
import { useSelector } from 'react-redux';
import { useFocusEffect } from '@react-navigation/native';
const showAlert = (msg,fun) =>
  Alert.alert(
    "提示",
    msg,
    [
      {
        text: "确认",
        onPress: fun,
        style: "cancel",
      },
    ],
    {
      cancelable: false,
    }
  );

const Share = ({navigation}) => {
    const {commendList,setCommendList} = useCommendList();
    const [change,setChange] = useState(false);
    const list=useSelector(state=>state.list)
    useFocusEffect(
        useCallback(()=>{
            if(list.isLogin==true){ 
                fetch('https://wx.qasdwer.top:8080/share/islike',{
                method:'post',
                headers:{
                  'content-type':'application/json;charset=utf-8'
                },
                body:JSON.stringify({account:list.account})
                })
                .then(res=>res.json())
                .then(res=>{
                    setCommendList(res)
                }) 
            }else{
                fetch('https://wx.qasdwer.top:8080/share/getshare')
                .then(res=>res.json())
                .then(res=>setCommendList(res))
            }
            
        },[list.isLogin])
    )
    return (
        <ScrollView>
                <Image source={require('../../assets/image/bg1.jpeg')} style={styles.bg}/>
                {
                commendList.map((item,index)=>{
                        return (
                            <View key={index}>
                                <TouchableOpacity  onPress={()=>navigation.navigate('ShareDetail',{listcon:item})} style={{marginBottom:changeH(30)}}>
                                <View style={styles.listview}>
                                    <View style={styles.usermes}>
                                        <Image source={{uri:item.userimg}} style={styles.userimg} />
                                        <Text numberOfLines={1} style={styles.namet}>{item.username}</Text>
                                        <Text numberOfLines={1} style={styles.namet}>{item.time0}</Text>
                                    </View>
                                    <Text numberOfLines={2} style={styles.listcontent}>{item.content}</Text>
                                    {
                                        item.img.length!=0?
                                        <Image source={{uri:item.img[0]}} style={styles.listimg}/>
                                        :
                                        <View></View>

                                    }
                                    
                                </View>
                            </TouchableOpacity>
                            <View style={styles.com}>
                                {
                                    item.islike==true?
                                    <AntDesign name="heart" size={24} color="red" 
                                        onPress={()=>{
                                            fetch('https://wx.qasdwer.top:8080/share/unlike',{
                                                method:'put',
                                                headers:{
                                                  'content-type':'application/json;charset=utf-8'
                                                },
                                                body:JSON.stringify({id:item.key0,account:list.account,likenum:item.likenum})
                                                })
                                           .catch((error)=>{
                                                console.log("Error");
                                                throw error;
                                            }); 
                                            item.islike='false'
                                            item.likenum = item.likenum - 1;
                                            setCommendList(commendList)
                                            setChange(!change)
                                        }}
                                    />
                                    :
                                    <AntDesign name="hearto" size={24} color="black" 
                                        onPress={()=>{
                                            if(list.isLogin==false){
                                                showAlert('请先登录',()=>navigation.navigate('Login'))
                                            }else{
                                                fetch('https://wx.qasdwer.top:8080/share/like',{
                                                method:'put',
                                                headers:{
                                                  'content-type':'application/json;charset=utf-8'
                                                },
                                                body:JSON.stringify({id:item.key0,account:list.account,likenum:item.likenum})
                                                })
                                           .catch((error)=>{
                                                console.log("Error");
                                                throw error;
                                            }); 
                                            item.islike=true;
                                            item.likenum = item.likenum + 1;
                                            setCommendList([...commendList])
                                            setChange(!change)
                                            }
                                            
                                        }}
                                    />
                                }
                                        <Text>{item.likenum}</Text>
                                        <MaterialCommunityIcons name="comment-processing-outline" size={24} color="rgba(0,0,0,0.7)" />
                                        <Text>{item.comnum}</Text>
                                    </View>
                        </View>
                        )  
                })
            }
            
        </ScrollView>
    )
}
const styles=StyleSheet.create({
    bg:{
        width:'100%',
        height:changeH(300),
        marginBottom:changeH(30)
    },
    listview:{
        width:'95%',
        backgroundColor:'white',
        marginLeft:changeW(20),
        marginRight:changeW(20),
        borderRadius:changeW(30),
        paddingBottom:changeH(50)
    },
    listcontent:{
        color:'rgba(0,0,0,0.7)',
        top:changeH(30),
        left:changeW(30),
        width:'95%',
        marginRight:changeW(20)
    },
    listimg:{
        width:changeW(190),
        height:changeH(170),
        marginTop:changeH(50),
        marginLeft:changeW(30),
        borderRadius:changeW(10)
    },
    userimg:{
        width:changeW(70),
        height:changeW(70),
        borderRadius:changeW(35),
    },
    usermes:{
        width:changeW(350),
        height:changeH(70),
        marginTop:changeH(30),
        marginLeft:changeW(30),
        flexDirection:'row',
    },
    namet:{
        lineHeight:changeH(75),
        marginLeft:changeW(25)
    },
    com:{
        width:'20%',
        marginLeft:changeW(520),
        marginTop:changeH(20),
        marginBottom:changeH(10),
        flexDirection:'row',
        position:'absolute',
        bottom:changeH(35),
        justifyContent:'space-around'
    }
})
export default Share
